<template>
    <div>
        <div class="searchHeader">
            <el-select v-model="articleData.cid" placeholder="请选择" size="small">
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.catename"
                        :value="item.id">
                </el-option>
            </el-select>

            <el-input size="small" placeholder="请填写文章标题" class="titleInput" v-model="articleData.title"></el-input>
        </div>

        <div>
            <mavon-editor style="height: 380px" v-model="articleData.mdContent" @change="getContent"/><br>
            <el-button size="small" type="primary" class="article" icon="el-icon-upload" @click="publishArticle">发布文章</el-button>
            <el-button size="small" type="default" class="article" icon="el-icon-edit-outline" @click="saveArticle">保存草稿</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ArticlePublish",
        data(){
            return{
                options: [],
                content:'',
                articleData:{
                    id:0,
                    cid:'',
                    mdContent:'',
                    htmlContent:'',
                    title:'',
                    status:0
                },
                editId:0
            }
        },
        methods:{
            initCategory(){
                this.$getRequest('/article/getCategory').then(resp=>{
                    if(resp){
                        this.options = resp;
                    }
                })
            },
            getContent(markdown,html){
                this.articleData.mdContent=markdown;
                this.articleData.htmlContent=html;
            },
            publishArticle(){
                this.articleData.status=1;
                this.requestArticle();
            },
            saveArticle(){
                this.articleData.status=3;
                this.requestArticle();
            },
            requestArticle(){
                if(this.articleData.id==0){
                    this.$postRequest('/article/addArticle',this.articleData).then(resp=>{
                        if(resp){
                            this.articleData.id = resp.data;
                        }
                    })
                }else{
                    this.$putRequest('/article/updateArticle',this.articleData).then(resp=>{})
                }
            },
            editArticle() {
                this.$getRequest('/article/getArticleContent?id='+this.editId).then(resp => {
                    if (resp) {
                        this.articleData.id = resp.id;
                        this.articleData.cid = resp.category.id;
                        this.articleData.title = resp.title;
                        this.articleData.mdContent = resp.mdContent;
                    }
                })
            }
        },
        mounted() {
            this.initCategory();
            if(this.$route.query.id){
                this.editId=this.$route.query.id;
                this.editArticle()
            }
        }
    }
</script>

<style scoped>
    .searchHeader{
        margin: 15px 0;
    }

    .titleInput{
        width: 30%;
        margin-left: 10px;
    }

    .article{
        float: right;
        margin-right: 10px;
    }
</style>